<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript"  src="js/jquery.js"></script>
</head>

<body>
<div class="box">
  <div class="left">
    <div class="notification msginfo">There are 3 submitted items from users. <a href="">Click to approve</a> </div>
    <div class="clear"></div>
    <ul class="widgetlist">
      <li><a href=""><img alt="Document Icon" src="img/document.png"><span>Add New Article</span></a></li>
      <li><a href=""><img alt="Report Icon" src="img/createreport.png"><span>Create Report</span></a></li>
      <li><a href=""><img alt="Mail Icon" src="img/mail.png"><span>Compose Mail</span></a></li>
      <li><a href=""><img alt="Events Icon" src="img/calendar.png"><span>Manage Events</span></a></li>
      <li><a href=""><img alt="Media Icon" src="img/media.png"><span>Media Library</span></a></li>
    </ul>
    <div class="clear"></div>
    <div class="widgetbox">
      <h3 class=""><span>Sample Chart</span></h3>
      <div class="content nopadding ohidden">
        <table width="100%" cellspacing="0" cellpadding="0" class="sTable3">
          <thead>
            <tr>
              <td>Column 1</td>
              <td>Column 2</td>
              <td>Column 3</td>
              <td align="right">Impressions</td>
              <td align="right">Percentage</td>
              <td>Column 6</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Row Text 1</td>
              <td>Row Text 2</td>
              <td>Row Text 3</td>
              <td align="right">2 100.00</td>
              <td align="right">20%</td>
              <td>Row Text 6</td>
            </tr>
            <tr class="even">
              <td>Row Text 1</td>
              <td>Row Text 2</td>
              <td>Row Text 3</td>
              <td align="right">2 100.00</td>
              <td align="right">20%</td>
              <td>Row Text 6</td>
            </tr>
            <tr>
              <td>Row Text 1</td>
              <td>Row Text 2</td>
              <td>Row Text 3</td>
              <td align="right">2 100.00</td>
              <td align="right">20%</td>
              <td>Row Text 6</td>
            </tr>
            <tr class="even">
              <td>Row Text 1</td>
              <td>Row Text 2</td>
              <td>Row Text 3</td>
              <td align="right">2 100.00</td>
              <td align="right">20%</td>
              <td>Row Text 6</td>
            </tr>
            <tr>
              <td>Row Text 1</td>
              <td>Row Text 2</td>
              <td>Row Text 3</td>
              <td align="right">2 100.00</td>
              <td align="right">20%</td>
              <td>Row Text 6</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- content --> 
    </div>
    <div class="page">
        <a href="#">第一页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>
      </div>
  </div>
  <div class="right fl">
    <div class="righttaba hidd">
      <h2 class="righttab_h2"><span class="currbg">TAB切换</span><span>TAB切换</span><span>TAB切换</span></h2>
      <div class="tabdivbox">
        <ul>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
        </ul>
        <ul class="none">
          <li><a href="#">11111111111111</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
        </ul>
        <ul class="none">
          <li><a href="#">333333333333333</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
          <li><a href="#">列表列表列表列表列表列表列表列表列表</a></li>
        </ul>
      </div>
    </div>
    <div class="tabdivtwo hidd mt10">
       <h2 class="righttab_h2"><div class="tabbdiv">标题</div></h2>
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
       <h2 class="righttab_h2"><div>标题</div></h2>
       <p class="none">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
       <h2 class="righttab_h2"><div>标题</div></h2>
       <p class="none">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
    $rtab=$(".righttaba h2 span");
	$rtab.mouseover(function(){
		$(this).addClass("currbg").siblings().removeClass("currbg");
		$index=$rtab.index(this);
		$(".tabdivbox>ul").eq($index).show().siblings().hide()
	});
	//
	$(".tabdivtwo h2").click(function(){
		$(this).next('p').slideDown().siblings('p').slideUp();
		$(".tabdivtwo div").removeClass("tabbdiv");
		$(this).children('div').addClass("tabbdiv");
	});
	//
	var ww=document.body.scrollWidth; 
	$(".box").width(ww-386);
});
</script>

</body>
</html>
